<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="{{ asset('javascript/jquery/jquery-2.1.1.min.js') }}" type="text/javascript"></script>
  <script src="{{ asset('javascript/bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
  <script src="{{ asset('javascript/layer/layer.js') }}" type="text/javascript"></script>
  <script src="{{ asset('javascript/vue/vue.js') }}" type="text/javascript"></script>
  <script src="{{ asset('javascript/element/js.js') }}" type="text/javascript"></script>
  <link href="{{ asset('javascript/element/css.css') }}" rel="stylesheet" type="text/css" />
  <link href="{{ asset('javascript/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
  <link href="{{ asset('css/login.css') }}" rel="stylesheet" type="text/css" />
  <link href="{{ asset('resources/imgs/favicon.ico') }}" rel="icon">
  <title>客户登录</title>
</head>
<body>
  <div class="container" id="app">
    <div id="title-section">
      <h3>手机登录</h3>
    </div>
    <div id="form-section">
      <div id="form-account" class="form-item">
        <el-input placeholder="请输入手机号码" v-model="account" class="no-radio">
          <template slot="prepend">+86</template>
        </el-input>
      </div>
      <div id="form-verify-code" class="form-item">
        <el-input placeholder="请输入5位验证码" v-model="verify_code" class="no-radio">
          <el-button slot="append" :disabled="disabled" type="text" class="verify-code-btn" @click="requestVerifyCodeCheck">
            ${ verifyText }
          </el-button>
        </el-input>
      </div>
      <div class="form-item" id="agree">
        <el-checkbox v-model="agree" class="agree-check"></el-checkbox>
        <p>同意 <a href="javascript:;">《用户协议》</a> 和 <a href="javascript:;">《隐私保护政策》</a></p>
      </div>
      <div class="form-item" id="btn">
        <el-button class="submit-btn" @click="submit">登录</el-button>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript">
  let app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
      account: '',
      verify_code: '',
      disabled: false,
      agree: false,
      seconds: 60,
      verifyText: '获取验证码',
      intelVerify: null,
      redirect: '{{ $redirect }}'
    },
    methods: {
      requestVerifyCodeCheck() {
        if (!this.account) {
          layer.msg('请输入手机号码')
          return false
        }
        let that = this
        let loadIndex = layer.load(1, {
          shade: [0.1,'#000']
        });
        $.ajax({
          url: '{{ env('APP_URL') }}/verify_code',
          data: 'account=' + that.account,
          type: 'post',
          success: function (res) {
            layer.close(loadIndex)
            layer.msg(res.msg)
            if (res.code == -1) {
              return false;
            }
            that.intelVerify = setInterval(that.requestVerifyCode, 1000)
          },
          error: function (e) {
            layer.close(loadIndex)
            layer.msg(e.responseJSON.message)
          }
        });
      },
      requestVerifyCode() {
        console.log('time start')
        this.disabled = true
        if (this.seconds == 1) {
          this.verifyText = '获取验证码';
          this.disabled = false
          this.seconds = 60
          clearInterval(this.intelVerify)
        } else {
          this.seconds = this.seconds - 1
          this.verifyText = this.seconds + '秒后重新获取'
        }
      },
      submit() {
        if (!this.account) {
          layer.msg('请输入手机号码');
          return false;
        }
        if (!this.verify_code) {
          layer.msg('请输入验证码');
          return false;
        }
        if (!this.agree) {
          layer.msg('你还没有勾选同意信息');
          return false;
        }
        let loadIndex = layer.load(1, {
          shade: [0.1,'#000']
        });
        let that = this
        $.ajax({
          url: '{{ env('APP_URL') }}/account/storage_user',
          data: 'account=' + that.account + '&verify_code=' + that.verify_code,
          type: 'get',
          success: function (res) {
            layer.close(loadIndex)
            layer.msg('登录成功')
            window.location = '{{ env('APP_URL') }}/' + that.redirect
          },
          error: function (e) {
            layer.close(loadIndex)
            layer.msg(e.responseJSON.message)
          }
        });
      }
    }
  });
</script>
</html>